import { ModalForm, ProFormSelect } from '@ant-design/pro-components';
import { Button, message, notification } from 'antd';
import { queryChargeRules, updateMulLot } from '../service';

const UpdateMulChargeRule = (props: { parkingLotIds: string[]; realod: () => void }) => {
  const { parkingLotIds, realod } = props;

  const openNotification = (msg: string = '删除失败') => {
    const key = `open${Date.now()}`;
    const btn = (
      <Button type="primary" size="small" onClick={() => notification.close(key)}>
        已读
      </Button>
    );
    notification.open({
      message: '批量更新路段收费规则失败',
      description: msg,
      btn: btn,
      duration: null,
      key,
    });
  };
  return (
    <ModalForm
      title="批量更新路段收费规则"
      width="35vw"
      layout="horizontal"
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 16 }}
      trigger={<a>批量更新收费规则</a>}
      onFinish={async (values) => {
        if (!parkingLotIds || parkingLotIds.length <= 0) {
          message.warn({ content: '请选择需要更新的路段', key: 'mul-chargeRule' });
          return false;
        }
        if (!values.chargeRule) return false;
        message.loading({ content: '正在更新...', key: 'mul-chargeRule' });
        const res = await updateMulLot(parkingLotIds, values.chargeRule);
        realod();
        if (res?.success) {
          message.success({ content: '更新成功', key: 'mul-chargeRule' });
          return true;
        }
        openNotification(res?.message);
        return false;
      }}
    >
      <ProFormSelect
        name="chargeRule"
        label="收费规则"
        showSearch
        debounceTime={300}
        placeholder="请选择收费规则，若无目标规则请前往收费规则模块进行创建"
        rules={[
          {
            required: true,
            message: '请选择收费规则，若无目标规则请前往收费规则模块进行创建',
          },
        ]}
        request={(val) => queryChargeRules(val.keyWords)}
      />
    </ModalForm>
  );
};

export default UpdateMulChargeRule;
